<style>
    .ui-menu {
        border: solid #eee 1px;
        background-color: white;
    }

    .ui-menu .ui-menu-item {
        padding: 0px;
        margin-bottom: 2px;
    }
</style> 

<header>
    <div class="row b-b m-l-none m-r-none bg-white-only">
        <div class="col-sm-4">
            <h3 class="m-t m-b-none">SMS Messaging</h3>
            <p class="block text-muted m-t-xs">BROADCAST MESSAGING</p>
        </div>
        <div class="col-sm-8">
            <!-- MINI STATS - Review before deleting permanently -->
            <div class="clearfix m-t-lg m-b-sm pull-right pull-none-xs">
                <div class="pull-left">                  
                    <div class="pull-right m-l-xs">
                        <span class="block">SMS Balance <!--<span class="badge up bg-danger">+5</span>--></span>                    
                        <span class="h4 block text-center" id="sms_account_balance"><?php echo $sms_account['balance']; ?></span>
                        <!--<i class="fa fa-level-up text-success"></i>-->
                    </div>
                    <div class="clear">
                        <i class="fa fa-mobile-phone fa-3x"></i>
                    </div>
                </div>
                <div class="pull-left m-l-lg">
                    <div class="pull-left m-r-xs">
                        <button type="button" class="btn btn-success btn-sm"><i class="fa fa-mobile-phone"></i> Buy Credit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header> 

<section  class="hbox stretch">

    <aside class='aside-sm b-r'>
        <header class='b-b bg-white p-xs'>
            <h5 class='font-bold m-l-sm'>Settings</h5>
        </header>
    </aside>

    <aside class='aside-lg b-r bg-white'>
        <header class='b-b bg-white p-xs'>
            <h5 class='font-bold  m-l-sm'>Compose Message</h5>
        </header>

        <section class='col-lg-12 m-t-sm'>
            <form action="<?php echo $this->Html->url(array('action' => 'sendBroadcastMessage')); ?>" id="send_broadcast_form" method="post" class="form form-horizontal">
                <div class="form-group">
                    <div class="control-label col-lg-3">Broadcast List</div>
                    <div class="controls col-lg-9">
                        <select id="broadcast_list_id" style="width: 100%;">
                            <option value="">Select Broadcast List</option>
                            <optgroup label="Predefined Lists" data-group="predefined">
                                <?php
                                foreach ($predefined_lists as $list) {
                                    $value = $list['category_id'];
                                    $text = $list['name'];

                                    echo "<option value='cat_$value'>$text</option>";
                                }
                                ?>
                            </optgroup>
                            
                            <optgroup label="Custom Lists" data-group="custom">
                                <?php
                                foreach ($broadcast_lists as $list) {
                                    $value = $list['id'];
                                    $text = $list['name'];

                                    echo "<option value='list_$value'>$text</option>";
                                }
                                ?>
                            </optgroup>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="control-label col-lg-3">Message</div>
                    <div class="control-group col-lg-9">
                        <textarea id="send_broadcast_message" class="form-control input-sm" rows="3" maxlength="160" placeholder="Enter SMS Message Here" onkeyup="document.getElementById('charsleft').innerHTML = (160 - parseInt(this.value.length)) + ' Left';"></textarea>
                        <div id="charsleft" class="text-muted m-t-sm text-sm text-right">
                            160 Left
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="control-label col-lg-3">Schedule</div>
                    <div class="controls col-lg-9">
                        <label class="m-r"> 
                            <input type="radio" class="schedule_opt" name="schedule_opt" value="now" checked="" />
                            Send Now
                        </label>
                        
                        <label class="m-r">
                            <input type="radio" class="schedule_opt" name="schedule_opt" value="schedule" />
                            Schedule
                        </label>
                    </div>
                </div>
                
                <div class="form-group m-b-lg" id="schedule_row" style="display: none;">
                    <div class="control-label col-lg-3"></div>
                    <div class="controls col-lg-9">
                        <input type="text" id="schedule" class="combodate input-sm form-control" data-format="YYYY-MM-DD HH:mm" data-template="D  MMM  YYYY  -  HH : mm" name="datetime" value="<?php echo date('Y-m-d H:i'); ?>" />
                    </div>
                </div>
                
                <div class="form-actions text-right">
                    <button type="submit" id="send_broadcast_btn" class="btn btn-sm btn-info"><i class="fa fa-envelope"></i> Send Broadcast</button>
                </div>
            </form>
        </section>
    </aside>

    <aside class='aside-lg bg-white'>
        <header class='b-b bg-white p-xs'>
            <h5 class='font-bold m-l-sm'>Recent History</h5>
        </header>

        <section id='broadcast-history' class='col-lg-12 m-t-sm'>
            Loading ...
        </section>
    </aside>

</section>

<input type="hidden" id="contacts-autocomplete-url" value="<?php echo $this->Html->url(array('controller' => 'sms', 'action' => 'members_list')); ?>" />
<input type='hidden' id='broadcast_history_url' value='<?php echo $this->Html->url(array('action' => 'broadcast_history')); ?>' />
<?php
echo $this->Html->script('app/views/sms/broadcast.js');
?>